<template>
  <div class="form-view-row">
    
    <label>
      {{ field.displayName }}
    </label>
    
    <!-- <div :class="buttonClassNames" @click="openConnectorDialog">
      查看
    </div> -->
    
    <!-- <connector-table-dialog ref="connectorDialogComponent" /> -->
    <div class="connector-content">
      <template v-if="selectType == 1">
        <!-- 列表模式 -->
        {{ connectorNames }}
      </template>
      <template v-else>
        <!-- 选项模式 -->
        <div class="table-box">
          <ConnectorModuleConnectorComponentTable
            ref="multipleTable"
            :fields="columns"
            :values="value"
            :showIndex="true"
            :border="true"
          />
        </div>
      </template>
    </div>
    
  </div>
</template>

<script>
/* components */
import ConnectorTableDialog from "@src/modules/task/list/components/ConnectorTableDialog"
import {
  ConnectorModuleConnectorComponentTable
} from "@src/modules/connector";
import {
  getSortConnectorToFieldsByShowFieldNameList,
} from "@src/modules/connector/util";
import { isArray, isObject } from "@src/util/type";
import { getFiledLaForHttp } from '@src/api/ConnectorApi';
export default {
  name: 'form-connector-view',
  props: {
    field: {
      type: Object,
      default: () => {},
    },
    value: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  components: {
    ConnectorTableDialog,
    [ConnectorTableDialog.name]: ConnectorTableDialog,
    ConnectorModuleConnectorComponentTable
  },
  data() {
    return {
      selectColumns: [],
    }
  },
  watch:{
    connector: {
      handler(newValue) {
        this.initSelectColumns(newValue);
      },
      immediate: true,
    },
  },
  computed: {
    buttonClassNames() {
      return this.disabled ? '' : 'view-detail-btn'
    },
    // 表单表头
    columns() {
      let columns = [];
      if(this.selectColumns?.length > 0){
        const selectColumns = this.selectColumns.map(field => {
          field.label = field.cnName;
          field.field = field.enName;
          field.fieldName = field.enName;
          field.formType = field.fieldType;
          return field;
        });

        columns = [...selectColumns, ...this.subFormFieldList];
      }
      return columns;
    },
    connector() {
      return this.field?.setting?.connector
    },
    toFields(){
      return this.connector?.actionList?.find(action => action.action === 'SELECT')?.toResponseFieldList || [];
    },
    // 展示模式
    selectType() {
      // 默认选项模式
      return this.field?.setting?.selectType || 1
    },
    // 连接器列表模式显示字符串
    connectorNames() {
      // 取showFieldNameList第一个字段的值
      const fieldName = this.connector?.showFieldNameList?.[0];
      if(fieldName) {
        if(isObject(this.value)) return this.value[fieldName] || '';
        if(isArray(this.value)) {
          return this.value.map(item => {
            const result = item[fieldName];
            if(isObject(result)) {
              return result.name || result.displayName || result.taskNo || '';
            }
            return result || '';
          }).join(',');
        }
      }
      return '';
    },
    /* 自定义字段 */
    subFormFieldList() {
      let { subFormFieldList = [] } = this.field?.setting || {};
      return subFormFieldList.map(field => {
        field.label = field.displayName;
        field.field = field.fieldName;
        return field;
      });
    },
  },
  methods: {
    openConnectorDialog() {
      
      if (this.disabled) {
        console.warn('[form-connector-view] is disabled')
        return
      }
      
      this.$refs.connectorDialogComponent.open(this.field, this.value);
      
    },
    async initSelectColumns(newValue) {
      if (newValue) {
        let { showFieldNameList, additionalId } = newValue;
        if (showFieldNameList) {
          let arr = getSortConnectorToFieldsByShowFieldNameList(this.toFields, showFieldNameList);
          try {
            // 表单name 国际化
            const { showFieldNameList } = this.connector;
            let res = await getFiledLaForHttp({
              id: additionalId,
              showFieldNameList,
            });
            if (res.status === 0) {
              if (res.data?.length) {
                this.selectColumns = arr.map(i => {
                  let realName = res.data.find(j => j.enName === i.enName)?.cnName || '';
                  return {
                    ...i,
                    cnName: realName,
                    label: realName,
                  };
                });
              } else {
                this.selectColumns = arr;
              }
            }
          } catch (error) {
            console.error(error, 'getFiledLaForHttp is Error');
            this.selectColumns = arr;
          }
        }
      }
    },
  }
}
</script>

<style lang="scss">
.form-view-row .connector-content{
  width: calc(100% - 104px);
  .el-table--border{
    border:1px solid #EBEEF5!important;
  }
}
</style>